<template>
	<view class="login-box">
		<view class="login-header">省(市)自由行</view>
		<view>
			<base-form :formColumn="formColumn" v-model="formData" :rules="rules" ref="form">
				<template #telBtton>
					<view class="tel-btn" @click="getCode">
						{{codeName}}
					</view>
				</template>
			</base-form>
		</view>
		
		<view class="login-btn">
			<u-button text="提交" shape="circle" type="primary" color="linear-gradient(to right, #93DCB4, #5CB87F)"
			 @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formColumn:[
					{
						label:'姓名',
						key:'name',
						type:'text',
						required:true,
						placeholder:'请输入姓名',
					},
					{
						label:'身份证',
						key:'idcard',
						type:'text',
						required:true,
						placeholder:'请输入身份证',
					},
					{
						label:'手机号',
						key:'tel',
						type:'text',
						required:true,
						slot:'telBtton',
						placeholder:'请输入手机号',
					},
					{
						label:'验证码',
						key:'code',
						type:'text',
						required:true,
						placeholder:'请输入验证码',
					},

				],
				formData:{
					
					name:'',
					idcard:'',
					tel:'',
					code:'',

				},
				rules:{
					'name': {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					'idcard': {
						type: 'string',
						required: true,
						message: '请输入身份证',
						trigger: ['blur', 'change']
					},
					'tel': {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					},
					'code': {
						type: 'string',
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					},

					
				},
				
				isSend: false,  //禁用
				codeName: "获取验证码",
				totalTime: 10, //一般是60
				timer:'', //定时器
			}
		},
		methods: {
			async submit(){
				const res = await this.$refs['form'].validate()
				console.log(res)
			},
			async getCode(){
				if(!this.formData.tel){
					uni.$u.toast('请输入手机号');
					return
				}
				if (this.isSend){
					uni.$u.toast('倒计时结束后再发送');
					return
				}
				console.log('获取验证码')
				//await loginService.code({mobile:this.formData.mobile,type:1})// 获取验证码的接口
				
				this.isSend = true
				this.codeName = this.totalTime + 's后重新发送'
				this.timer = setInterval(() => {
				   this.totalTime--
				   this.codeName = this.totalTime + 's后重新发送'
				   if (this.totalTime < 1) {
				   clearInterval(this.timer)
				   this.codeName = '获取验证码'
				   this.totalTime = 10
				   this.isSend = false 
				   }
				}, 1000)
					
			}
		}
	}
</script>

<style lang="less">
page{
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #4C4C4C;
	width: 100%;
	height: 100%;
}
.login-box{
	
	margin-left: 20rpx;
	margin-right: 20rpx;
	padding: 50rpx 40rpx;
	border-radius: 20rpx;
	background-color: #fff;
	.login-header{
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.login-btn{
		margin-top: 40rpx;
	}
}
.tel-btn{
	color: #61BA83;
}

</style>
